<template>
  <div class="body_analysis">
    <report-card :titleList="['muscle_balance_1006', 'muscle_balance_1006']" :pageNum="2">
      <div slot="firstPage" class="body_analysis_left">
        <muscle-balance-diagram
          :measureData="measureData"
          v-if="measureData && weight_unit"
          :weight_unit="weight_unit"
        />
      </div>
      <div slot="lastPage" class="body_analysis_right">
        <div class="body_analysis_table">
          <div class="body_analysis_table_item flex" v-for="item in muscleBalance" :key="item.name">
            <p class="body_analysis_table_item_title">{{ i18n.t(item.name) }}</p>
            <div class="body_analysis_table_item_tag flex">
              <my-tag
                v-for="(level, index) in levels"
                :key="level.color"
                :text="level.name"
                :activeColor="level.color"
                :selected="item.index === index"
                class="body_analysis_table_button"
              />
            </div>
          </div>
        </div>
        <p class="body_analysis_descire">
          {{ i18n.t('muscle_balance_1014') }}
        </p>
        <div class="report_title">{{ i18n.t('muscle_balance_1017') }}</div>
        <div class="body_analysis_table">
          <div class="body_analysis_table_item flex" v-for="item in bodyPower" :key="item.name">
            <p class="body_analysis_table_item_title">{{ i18n.t(item.name) }}</p>
            <div class="body_analysis_table_item_tag flex">
              <my-tag
                v-for="(level, index) in bodyPowerLevels"
                :key="level.color"
                :text="level.name"
                :activeColor="level.color"
                :selected="item.index === index"
                class="body_analysis_table_button button_power"
                :class="{ button_normal: index === 1, button_strong: index === 2 }"
              />
            </div>
          </div>
        </div>
      </div>
    </report-card>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import ReportCard from './reportCard/index.vue'
import MyBarChartForBody from './MyBarChartForBody.vue'
import MyTag from './MyTag.vue'
import MuscleBalanceDiagram from './MuscleBalanceDiagram.vue'
import { calcLevel, boundariesAverage } from '@/assets/ts/eight_electrodes_report/Util'
import getMeasureData, { consts } from '@yolanda-qn/eight-electrodes-report-lib'
import { TypedScaleData, TypedConfig } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'

@Component({ components: { ReportCard, MyBarChartForBody, MyTag, MuscleBalanceDiagram } })
export default class extends Mixins() {
  @Prop() measureData!: TypedScaleData
  @Prop() weight_unit!: consts.WeightUnitEnum
  @Prop() config!: TypedConfig

  readonly levels = Object.freeze([
    { name: 'muscle_balance_1008', color: '#1CCDAA' },
    { name: 'muscle_balance_1009', color: '#FFC53D' },
    { name: 'muscle_balance_1010', color: '#FF7A45' },
  ])
  readonly bodyPowerLevels = Object.freeze([
    { name: 'muscle_balance_1013', color: '#FF7A45' },
    { name: 'base_1002', color: '#1CCDAA' },
    { name: 'muscle_balance_1012', color: '#FFC53D' },
  ])
  muscleBalance: Array<{ name: string; index: number }> = []
  bodyPower: Array<{ name: string; index: number }> = []
  mounted() {
    this.getMuscleBalance()
  }
  getMuscleBalance() {
    const standLevelIndex = 0
    const ReportIdsMapping = consts.ReportBuilderIdsEnum
    const SinewLeftArmReport = getMeasureData(this.measureData, {
      ...this.config,
      builderIds:[ReportIdsMapping.SinewLeftArm]
    }).map((item) => item.toObject())[0]
   
    const SinewRightArmReport = getMeasureData(this.measureData, {
      ...this.config,
      builderIds:[ReportIdsMapping.SinewRightArm]
    }).map((item) => item.toObject())[0]
   
    const SinewLeftLegReport = getMeasureData(this.measureData, {
      ...this.config,
      builderIds:[ReportIdsMapping.SinewLeftLeg]
    }).map((item) => item.toObject())[0]
     const { sinew_right_leg, gender, height, weight } = this.measureData;
    const SinewRightLegReport = getMeasureData(this.measureData, {
      ...this.config,
      builderIds:[ReportIdsMapping.SinewRightLeg]
    }).map((item) => item.toObject())[0]

    const SinewArm = Math.abs(Number(SinewLeftArmReport.value) - Number(SinewRightArmReport.value)) // 上肢均衡百分比差值
    const SinewLeg = Math.abs(Number(SinewLeftLegReport.value) - Number(SinewRightLegReport.value)) // 上肢均衡百分比差值
    const boundaries = [6, 9]
    const calcLevelArmIndex = calcLevel(SinewArm, boundaries, standLevelIndex) // 计算出上肢均衡所在索引值
    const calcLevelLegIndex = calcLevel(SinewLeg, boundaries, standLevelIndex) // 计算出下肢均衡所在索引值
    const armLegIndex = this.getArmLegIndex(calcLevelArmIndex, calcLevelLegIndex)
    this.muscleBalance = [
      { index: calcLevelArmIndex, name: 'muscle_balance_1003' },
      { index: calcLevelLegIndex, name: 'muscle_balance_1004' },
      { index: armLegIndex, name: 'muscle_balance_1005' },
    ]
    this.getBodyPower(SinewLeftArmReport.boundaries as any, SinewLeftLegReport.boundaries as any)
  }
  getBodyPower(armBoundaries: Array<number>, legBoundaries: Array<number>) {
    const { sinew_left_arm, sinew_left_leg, sinew_right_arm, sinew_right_leg } = this.measureData
    console.log(sinew_left_arm, sinew_right_arm, typeof sinew_left_arm);
    const SinewArmAverage = boundariesAverage([sinew_left_arm, sinew_right_arm]) // 上肢均衡平均值
    const SinewLegAverage = boundariesAverage([sinew_left_leg, sinew_right_leg]) // 下肢均衡平均值
    console.log(SinewArmAverage, armBoundaries);
    const SinewArmIndex = calcLevel(SinewArmAverage, armBoundaries, 1)
    const SinewLegIndex = calcLevel(SinewLegAverage, legBoundaries, 1)

     const ReportIdsMapping = consts.ReportBuilderIdsEnum
     const pickReportsDetails = getMeasureData(this.measureData, {
       ...this.config,
       builderIds:[
         ReportIdsMapping.ProteinMass,
         ReportIdsMapping.WaterMass,
      ]
    });
      // console.log(pickReportsDetails)
    // 肌肉总量的标准为：蛋白质的标准 + 水分的标准
    // 肌肉量范围最小值 = 水分范围最小值+蛋白质范围最小值
    // 肌肉量范围最大值 = 水分范围最大值 + 蛋白质范围最大值
    const bodyBoundaries = [
      Number(pickReportsDetails[0].getBoundaries()[0]) + Number(pickReportsDetails[1].getBoundaries()[0]),
      Number(pickReportsDetails[0].getBoundaries()[1]) + Number(pickReportsDetails[1].getBoundaries()[1]),
    ]
    const bodyBoundariesIndex = calcLevel(this.measureData.sinew, bodyBoundaries, 1)
    console.log(bodyBoundaries);
    this.bodyPower = [
      { index: SinewArmIndex, name: 'muscle_balance_1003' },
      { index: SinewLegIndex, name: 'muscle_balance_1004' },
      { index: bodyBoundariesIndex, name: 'muscle_balance_1015' },
    ]
  }
  getArmLegIndex(calcLevelArmIndex: number, calcLevelLegIndex: number) {
    let armLegIndex = 1
    let armLegIndexJoin = [calcLevelArmIndex, calcLevelLegIndex].join('')
    //上和下肢的平均值评估结果是否一致，如都是标准则为正常，
    //相差一个标准为轻度不均(一个标准，一个超标或一个低标，一个标准)，相差两个标准为重度不均（一个低标，一个超标）
    // 0为正常 1为轻度不均 2为重度不均
    switch (armLegIndexJoin) {
      case '00':
      case '11':
      case '22':
        armLegIndex = 0
        break
      case '12':
      case '21':
        armLegIndex = 2
        break
      default:
        armLegIndex = 1
    }
    return armLegIndex
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.body_analysis {
  .body_analysis_left {
    padding: rem(20) rem(24) rem(45) rem(24);
  }
  .body_analysis_right {
    padding: 0 rem(24) rem(24);
  }
}
.body_analysis_table {
  background: $primaryBg;
  border: 1px solid $primaryBorder;
  padding: rem(0) rem(24);
  .body_analysis_table_item {
    padding: rem(25) 0 0;
    font-size: rem(28);
    color: $primaryColor;
    flex-wrap: wrap;
    &:nth-child(n + 2) {
      border-top: rem(2) dashed $secondaryBorder;
    }
    .body_analysis_table_item_title {
      width: rem(120);
    }
    .body_analysis_table_item_tag {
      flex: 1;
      flex-wrap: wrap;
    }
    .body_analysis_table_button {
      margin-bottom: rem(20);
      margin-left: rem(20);
    }
  }
}
.body_analysis_descire {
  margin-top: rem(20);
  font-size: rem(22);
  color: $secondaryColor;
  line-height: rem(30);
}
.table_buttons {
  flex: 1;
}
.button_power {
  order: 3;
}
.button_normal {
  order: 1;
}
.button_strong {
  order: 2;
}
</style>
